<template>
  <div class="brand" :v-if="brandShow">
    <div id="brand-content" style="height: 293px">
      <div
        :class="
          brandId == item.id ? 'item brand-list chosen' : 'item brand-list'
        "
        v-for="item in brand.subItems"
        :key="item.id"
          @click="brandChosen(item)"
      >
        <span class="brand-name">{{ item.name }}</span>
        <span class="brand-count">{{ item.count }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Brand",
  props: {
    brandShow: {
      type: Boolean,
      default: false,
    },
    brand: {
      type: Object,
    },
    cinemaVal:{
      type:Object
    }
  },
  data() {
    return {
      brandId: this.cinemaVal.brandId,
    };
  },
  methods:{
      brandChosen(val){
          this.cinemaVal.brandId = val.id;
          this.cinemaVal.brandName = val.name;
      }
  }
};
</script>

<style lang="scss" scoped>
.brand {
  background-color: #fff;
  overflow: auto;
  z-index: 999;
  #brand-content {
    .item {
      font-size: 15px;
    }
    .brand-list {
      position: relative;
      line-height: 44px;
      height: 44px;
      padding: 0 15px 0 26px;
      border-bottom: 1px solid #e5e5e5;
      color: #8f9296;;
      span {
        display: inline-block;
        width: 49%;
      }
      .brand-count {
        text-align: right;
        font-size: 12px;
      }
    }
    .chosen {
      color: #dd403b;
    }
    .chosen::before {
      content: "";
      display: block;
      position: absolute;
      left: 8px;
      top: 18px;
      width: 11.5px;
      height: 8px;
      background-image: url();
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>